<template>
  <view>
    <view class="img-a">
      <view class="t-b">
        您好，
        <br />
        欢迎使用 顽石租
      </view>
    </view>
    <view class="login-view">
      <view class="t-login">
        <form class="cl">
          <view class="input-code">
            <text class="txt">手机号</text>
            <input type="number" name="phone" placeholder="请输入您的手机号" maxlength="11" v-model="phone" />
          </view>
          <view class="input-code">
            <text class="txt">密码</text>
            <input type="password" placeholder="请输入密码" maxlength="6" v-model="password" />
            <!-- <view v-if='time>0' class="code-txt">
              {{time}}
            </view>
            <view v-else class="code-txt" @click="toggle('top')">
              {{"发送验证码"}}
            </view> -->
          </view>
          <button type="primary" @tap="login()">登 录</button>
        </form>
      </view>
    </view>
    <uni-popup ref="popup" background-color="#fff">
      <view class="popup-content">
        验证码:<text class="text" selectable>45678</text>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  onShow() {
    this.getuser()
  },
  data() {
    return {
      time: 0,
      title: '短信登录',
      checkCode: '', // 验证码
      phone: '',
      password: '',
      defphone: '',
      defpwd: '',
      inter_id: ''
    }
  },
  methods: {
    async getuser() {
      let url = 'http://127.0.0.1/user/default'
      let [, res] = await uni.request({
        url: url,
        method: 'GET'
      })
      let userInfo = res.data.data
      // console.log(userInfo)
      uni.setStorageSync('userinfo', JSON.stringify(userInfo))
      this.phone = userInfo.phone
      this.defphone = userInfo.phone
      this.password = userInfo.password
      this.defpwd = userInfo.password
    },
    timeup() {
      this.checkCode = ''
    },
    toggle(type) {
      this.$refs.popup.open(type)
      this.time = 10
      this.inter_id = setInterval(() => {
        if (this.time >= 0) {
          this.time--
        } else {
          clearInterval(this.inter_id)
        }
      }, 1000)
      // this.checkCode=45678
    },
    login() {
      if (this.phone == this.defphone && this.password == this.defpwd) {
        uni.showToast({
          icon: 'success',
          title: '登录成功'
        })
        setTimeout(() => {
          uni.switchTab({
            url: '/pages/center/center'
          })
        }, 1000)
      } else {
        uni.showToast({
          icon: 'error',
          title: '用户或密码错误'
        })
      }
    }
  }
}
</script>


<style lang="scss">
.img-a {
  width: 100%;
  height: 450rpx;
  background-image: url(https://zhoukaiwen.com/img/loginImg/head.png);
  background-size: 100%;

  .t-b {
    text-align: left;
    font-size: 42rpx;
    color: #ffffff;
    padding: 130rpx 0 0 70rpx;
    font-weight: bold;
    line-height: 70rpx;
  }
}

.login-view {
  width: 100%;
  position: relative;
  margin-top: -120rpx;
  background-color: #ffffff;
  border-radius: 8% 8% 0% 0;
}

.t-login {
  width: 600rpx;
  margin: 0 auto;
  font-size: 28rpx;
  padding-top: 80rpx;

  .txt {
    height: 90rpx;
    line-height: 90rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
  }

  input {
    margin-left: 20rpx;
    height: 90rpx;
    line-height: 90rpx;
    border-bottom: 1px solid #e9e9e9;
    font-size: 28rpx;
  }

  .input-code {
    display: flex;
    // justify-content: space-between;
    align-items: center;
    border-bottom: 2rpx solid #eeeeee;

    .code-txt {
      padding: 4rpx 10rpx;
      width: 160rpx;
      color: #a6a6a6;
      text-align: center;
      border: 2rpx solid #48ca4c;
      border-radius: 20rpx;
    }
  }
}

// 弹框
@mixin flex {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
}

.popup-content {
  @include flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  height: 50px;
  background-color: #fff;
}
</style>
